<template>
	<view>
		<!-- 搜索组件 -->
		<view  class="search-box">
			<my-search @click="gotoSearch"></my-search>
		</view>
		
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<view class="swiper-item" >
					<image :src="item.goods_img"></image>
				</view>
			</swiper-item>
			
		</swiper>
		<button type="default" class="music" @click="playVoice(lastRecord,isPlay)" style="height: 118rpx; width: 132rpx; display: block; box-sizing: border-box; left: 619rpx; top: 118rpx; position: fixed; right: 10px; bottom: 30px; z-index: 999">
		            <image src="/static/tab_icons//音乐1.png" mode="" style="height:50px;width:30px;"></image>
		        </button>
		<view class="nav-list">
			<view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
				<image :src="item.nav_img" class="nav-img"><view class="nav-text">{{item.nav_text}}</view></image>
			</view>
			
		</view>
		
		<!-- 楼层区域 -->
		<view class="floor-list">
			<!-- 每一个楼层的item项 -->
			<view class="floor-item" v-for="(item,i) in floorList" :key="i">
				<!-- 楼层标题 -->
				<image :src="item.floor_titel.img" class="floor-title"></image>
				<!-- 楼层图片区域 -->
				<view class="floor-img-box">
					<navigator class="left-img-box" :url="item.floor_text[0].url">
						<image :src="item.floor_text[0].img" :style="{width:item.floor_text[0].img_width + 'rpx',height:item.floor_text[0].img_height + 'rpx'}" ></image>
					</navigator>
					<view class="right-img-box">
						<navigator class="right-img-item" v-for="(item2,i2) in item.floor_text" :key="i2" v-if="i2 !== 0" :url="item2.url">
							<image :src="item2.img" :style="{width:item2.img_width + 'rpx'}" mode="widthFix"></image>
						</navigator>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlay: false,
				//这是轮播图的数据列表
				swiperList:[
					{
						goods_id:0,
						goods_img:'http://www.kepu.gov.cn/upload/sowingmap/2303ec0a-39bd-401c-bd98-79558c9dbc92.jpg?x-oss-process=style/kepu'
					},
					{
						goods_id:1,
						goods_img:'http://www.kepu.gov.cn/upload/sowingmap/b6fc767c-6da5-48dd-bd44-0cb7a0d1268b.jpg?x-oss-process=style/kepu'
					},
					{
						goods_id:2,
						goods_img:'http://www.kepu.gov.cn/upload/sowingmap/a314324c-e04c-4596-86a1-3fb5c144b832.jpg?x-oss-process=style/kepu'
					},
					{
						goods_id:3,
						goods_img:'http://www.kepu.gov.cn/upload/sowingmap/dcf8888d-33c6-4fe6-8744-772e6ac98878.jpg?x-oss-process=style/kepu'
					},
					{
						goods_id:4,
						goods_img:'http://www.kepu.gov.cn/upload/sowingmap/61b7ea01-0a0c-4ba7-9955-68159561ff3a.jpg?x-oss-process=style/kepu'
					}	
				],
				navList:[
					{
						nav_id:0,
						nav_text:'分类',
						nav_img:'/static/tab_icons/资料分类.png'
					},
					{
						nav_id:1,
						nav_text:'视频',
						nav_img:'/static/tab_icons/视频图标.png'
					},
					{
						nav_id:2,
						nav_text:'书籍音像',
						nav_img:'/static/tab_icons/线性图书.png'
					},
					{
						nav_id:3,
						nav_text:'人物',
						nav_img:'/static/tab_icons/人.png'
					}
				],
				floorList:[
					{
						floor_titel:{
							name:'视频',
							img:'/static/tab_icons/movie.jpg'
						},
						floor_text:[
							{
								name:'科技筑初心 共话巾帼梦',
								img_width:350,
								img_height:250,
								img:'http://www.kepu.gov.cn/upload/article/1e3b398d-5faa-4bb5-95b5-e6eef3b903c3.jpg?x-oss-process=style/kepu500',
								url:'/subpkg/movie_detail/movie_detail?data_title=科技筑初心 共话巾帼梦'
							},
							{
								name:'超重、肥胖问题频频，孩子的身材要怎么管理？',
								img_width:190,
								img:'http://www.kepu.gov.cn/upload/article/193bf9df-4372-42fd-b654-141ef77f7ae6.jpg?x-oss-process=style/kepu500',
								url:'/subpkg/movie_detail/movie_detail?data_title=超重、肥胖问题频频，孩子的身材要怎么管理？'
							},
							{
								name:'你见过住在地下800米洞穴里的“透明鱼”吗？',
								img_width:190,
								img:'http://www.kepu.gov.cn/upload/article/c8864e35-392c-4527-85bf-7ccec531a6a5.jpg?x-oss-process=style/kepu500',
								url:'/subpkg/movie_detail/movie_detail?data_title=你见过住在地下800米洞穴里的“透明鱼”吗？'
							},
							{
								name:'2023年世界湿地日：湿地修复',
								img_width:190,
								img:'http://www.kepu.gov.cn/upload/article/9c0a5cab-5a8d-4e46-982d-9a24eb39dae1.jpg?x-oss-process=style/kepu500',
								url:'/subpkg/movie_detail/movie_detail?data_title=2023年世界湿地日：湿地修复'
							},
							{
								name:'新冠病毒抗原自测操作方法',
								img_width:190,
								img:'http://www.kepu.gov.cn/upload/article/b63b46a8-fb7f-4ddc-b28b-643f005c8f7f.jpg?x-oss-process=style/kepu500',
								url:'/subpkg/movie_detail/movie_detail?data_title=新冠病毒抗原自测操作方法'
							}
						]
					},
						{
							floor_titel:{
								name:'书籍音像',
								img:'/static/tab_icons/picture.jpg'
							},
							floor_text:[
								{
									name:'名家与讲座',
									img_width:275,
									img_height:400,
									img:'http://www.kepu.gov.cn/upload/article/5cbe1ce1-9fc5-4311-9c7c-8452395a1cf0.jpg?x-oss-process=style/kepu500',
									url:'/subpkg/picture_detail/picture_detail?data_title=名家与讲座'
								},
								{
									name:'我读《北极熊科普佳作丛书》',
									img_width:305,
									img:'http://www.kepu.gov.cn/upload/article/8a8b347b-a468-4ca3-8ca5-2eca90c3ece9.jpg?x-oss-process=style/kepu500',
									url:'/subpkg/picture_detail/picture_detail?data_title=我读《北极熊科普佳作丛书》'
								},
								
								{
									name:'由《增长的极限》延续的“极限”',
									img_width:150,
									img:'http://www.kepu.gov.cn/upload/article/d1e385f0-9801-4c16-91e6-231f879f128c.jpg?x-oss-process=style/kepu500',
									url:'/subpkg/picture_detail/picture_detail?data_title=由《增长的极限》延续的“极限”'
								},
								{
									name:'《2022中国科幻产业报告》发布  聚焦中国科幻产业未来趋势',
									img_width:305,
									img:'http://www.kepu.gov.cn/upload/article/24314443-6d3e-4041-bc42-0f6e61c683bc.png?x-oss-process=style/kepu500',
									url:'/subpkg/picture_detail/picture_detail?data_title=《2022中国科幻产业报告》发布  聚焦中国科幻产业未来趋势'
								},
								{
									name:'野兽也有道德？',
									img_width:150,
									img:'http://www.kepu.gov.cn/upload/article/c8ecb968-59a3-4414-9508-02dfffecaa76.jpg?x-oss-process=style/kepu500',
									url:'/subpkg/picture_detail/picture_detail?data_title=野兽也有道德？'
								}
							]
						},
							{
								floor_titel:{
									name:'人物',
									img:'/static/tab_icons/person.jpg'
								},
								floor_text:[
									{
										name:'中国工程院院士——钟南山',
										img_width:350,
										img_height:325,
										img:'http://filecloud.kepu.gov.cn/kepufile/expert/FSyyhWYei5ERXHS4NzsW8cjBNKRcXSfs.jpeg?x-oss-process=style/kepu500',
										url:'/subpkg/person_detail/person_detail?name=中国工程院院士——钟南山'
									},
									{
										name:'光学博士——陈征',
										img_width:190,
										img:'http://filecloud.kepu.gov.cn/kepufile/expert/6tEb88ithA3GXswK6aFny4rCMydNynP7.jpg?x-oss-process=style/kepu500',
										url:'/subpkg/person_detail/person_detail?name=光学博士——陈征'
									},
									{
										name:'中国科学院院士——周忠和',
										img_width:190,
										img:'http://filecloud.kepu.gov.cn/kepufile/expert/c8AyBXQwK4dtNCinA7xtH3356X3DKG3r.jpg?x-oss-process=style/kepu500',
										url:'/subpkg/person_detail/person_detail?name=中国科学院院士——周忠和'
									},
									{
										name:'国家教育咨询委员会委员——王渝生',
										img_width:190,
										img:'http://filecloud.kepu.gov.cn/kepufile/expert/MGrYKMhXjCdHGxYyCATt7zNMRrX7EEhH.jpg?x-oss-process=style/kepu500',
										url:'/subpkg/person_detail/person_detail?name=国家教育咨询委员会委员——王渝生'
									},
									{
										name:'中国青少年科技辅导员协会副理事长——苏青',
										img_width:190,
										img:'http://filecloud.kepu.gov.cn/kepufile/expert/RiYbZtP3CDN7HJxPPAWk386MtQaysaFk.jpg?x-oss-process=style/kepu500',
										url:'/subpkg/person_detail/person_detail?name=中国青少年科技辅导员协会副理事长——苏青'
									}
								]
							}
					
					
				]
				
			};
		},
		onLoad(){
			this.innerAudioContext = uni.createInnerAudioContext();
			            this.playVoice('http://music.163.com/song/media/outer/url?id=30569197.mp3')
			            uni.$on('changePlay', isPlay => {
			                this.playVoice(this.lastRecord, this.isPlay)
			            })
		},
		methods:{
			navClickHandler(item){
				if(item.nav_text==='分类'){
					uni.switchTab({
						url:'/pages/cate/cate'
					})
				}
				if(item.nav_text==='视频'){
					uni.navigateTo({
						url:'/subpkg/movie_list/movie_list'
					})
				}
				if(item.nav_text==='书籍音像'){
					uni.navigateTo({
						url:'/subpkg/picture_list/picture_list'
					})
				}
				if(item.nav_text==='人物'){
					uni.navigateTo({
						url:'/subpkg/person_list/person_list'
					})
				}
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			},
			playVoice(url, isPlay) { // url即为音频路径
			                if (url) {
			                    this.lastRecord = url; // 将路径赋值给定义的变量好做判断
			                    this.innerAudioContext.src = url; // 配置音频播放路径
			                    this.innerAudioContext.play(); // 播放
			                    this.innerAudioContext.loop = true; // 是否循环播放
			                }
			                this.isPlay = !this.isPlay;
			                if (isPlay) {
			                    this.innerAudioContext.pause(); // 停止
			                }
			            }
		}
		
	}
</script>

<style lang="scss">

swiper{
	height: 330rpx;
	
	
	.swiper-item,
	image{
		width: 100%;
		height: 100%;
	}
}

.nav-list{
	display: flex;
	justify-content: space-around;
	margin: 15px  0;
	
	.nav-img{
		width: 128rpx;
		height: 90rpx;
	}
	.nav-text{
		 width: 100%;
		 height: 80rpx;
		 text-align: center;
		 color: #00aaff;
		 
		 
	}
}
.floor-title {
	height: 75rpx;
	width:  50%;
	
}
.right-img-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.floor-img-box{
	display: flex;
	padding-left: 10rpx;
}
.search-box{
	position: sticky;
	top: 0;
	z-index: 999;
}
.music{
	
}
</style>
